<template>
  <div class="main">
    <div class="comment" v-if="comment.cRate != 0">
      <div class="title">
        <span>用户评价</span>
        <a href="">更多</a>
      </div>
      <div class="mcon">
        <div class="user">
          <img :src="comment.userimg" alt="" />
          <span>{{ comment.username }}</span>
        </div>
        <div class="text">{{ comment.content }}</div>
        <div class="info">
          <span>{{ timeFormat(comment.time) }}</span>
          <span>{{ comment.style }}</span>
        </div>
        <div class="img">
          <img
            :src="item"
            alt=""
            v-for="(item, index) in comment.images"
            :key="index"
          />
        </div>
      </div>
    </div>
    <div v-else class="none">暂无评论</div>
  </div>
</template>
<script>
import { formatDate } from "commom/utils";
export default {
  props: {
    comment: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    timeFormat(value) {
      const date = new Date(value * 1000);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  computed: {},
};
</script>
<style scoped>
.main{
  border-bottom: 5px solid #eee;
}
.none{
  height: 60px;
  font-size: 25px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
}
.comment {
  padding: 0 10px;
  padding-bottom: 20px;
  
}
.comment .title {
  padding: 15px 0px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}
.comment .title a {
  font-size: 13px;
  float: right;
}
.comment .mcon .user {
  height: 60px;
  display: flex;
  align-items: center;
}
.comment .mcon .user > img {
  width: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.comment .mcon .text {
  font-size: 14px;
  line-height: 20px;
  color: #666;
  padding-bottom: 10px;
}
.comment .mcon .info {
  color: #999;
  font-size: 13px;
  line-height: 20px;
  height: 24px;
}
.comment .mcon .info span {
  margin-right: 10px;
}
.comment .mcon .img img {
  width: 70px;
  height: 70px;
  margin-right: 8px;
}
</style>